<template>
  <div class="limiter">

    <div class="container-login100"
         style="background-image: url('/assets/images/img-01.jpg');">
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="register"
                  class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg"
                 alt="AVATAR">
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Hello</span>

          <div class="wrap-input100 validate-input m-b-10"
               data-validate="请输入用户名">
            <input class="input100"
                   type="text"
                   v-model="email"
                   name="username"
                   placeholder="用户名"
                   autocomplete="off">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div class="wrap-input100 validate-input m-b-10"
               data-validate="请输入密码">
            <input class="input100"
                   type="password"
                   v-model="password"
                   name="pass"
                   placeholder="密码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn">注 册</button>
          </div>

          <!-- <div class="text-center w-full p-t-25 p-b-230">
                        <a href="index.html#" class="txt1">忘记密码？</a>
                    </div> -->

          <div class="text-center w-full">
            <router-link class="txt1"
                         to="/user/base/login">
              立即登录
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      email: '',
      password: '',
    }
  },
  methods: {
    register(values) {
      if (this.email == '') {
        //   该提示框使用了插件 https://vant-contrib.gitee.io/vant/#/zh-CN/toast
        this.$notify({
          // 提示框类型
          type: 'warning',
          message: '请输入邮箱',
          // 弹出时间
          duration: 1500,
        })
        return false
      }

      if (this.password == '') {
        this.$notify({
          type: 'warning',
          message: '请输入密码',
          duration: 1500,
        })

        return false
      }
      // 正则
      let EmailReg =
        /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/

      // 验证邮箱格式
      if (!EmailReg.test(this.email)) {
        this.$notify({
          type: 'warning',
          message: '邮箱格式不正确，请重新输入',
          duration: 1500,
        })
        return false
      }
      //   类似提示框的提示
      this.$toast.loading({
        message: '注册中',
        forbidClick: true,
        duration: 1500,
        // 关闭提示的同时调用异步
        onClose: async () => {
          // 封装数据
          let data = {
            email: this.email,
            password: this.password,
          }
          //   接收后台传回来的数据
          let result = await this.$api.register(data)
          console.log(result) ///src/components/user/Register.vue
          if (result.code === 1) {
            this.$notify({
              type: 'success',
              message: result.msg,
              duration: 1500,
              onClose: () => {
                this.$router.push(result.url)
              },
            })
            return false
          } else {
            this.$notify({
              type: 'danger',
              message: result.msg,
              duration: 1500,
            })
            return false
          }
        },
      })
    },
  },
}
</script>

<style>
@import url('/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');
@import url('/assets/css/util.css');
@import url('/assets/css/main.css');
.txt1 {
  line-height: 4.4 !important;
}
</style>